﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础</title>
    <!--样式设置在style标签中-->
    <style type="text/css">
        body{
            background-color: antiquewhite;/*背景颜色*/
            background-image: url(/img/rain1.png);/*设置元素的背景图片，默认背景重复显示*/
            background-repeat: no-repeat;/*设置背景图片是否重复   no-repeat：表示不重复；    repeat-x：横向重复；  repeat-y：纵向重复；  repeat：横向纵向重复*/
            background-size: 100%;/*设置背景图片大小*/
            color: red;
            font-family: "Arial Black";
        }
        /*!*定义内部标签 p标签*!*/
        /*p{*/
        /*    color: red;*/
        /*    font-family: 楷体;*/
        /*}*/
        /**{
            !*字体颜色*!
            color:#0000FF;
        }*/
        /*div{
            width: 100px;
            height: 100px;
            background-color: white;
        }*/
        /*#div1{
            color: red;
        }*/
        /*.div2{
            font-weight: bold;!*字体粗细*!
        }*/
        /*#div1,.div2,p{
            !*边框    边框的粗细   边框的风格   边框的颜色*!
            border :1px solid #0000FF;
        }*/
        /*后代选择器（以空格分割）*/
        /*.food li{
            border: 1px solid orchid;
        }*/
        /*子代选择器（以大于号分割）*/
        .food > li{
            border: 1px solid orchid;
        }
        /*相邻兄弟选择器（以加号分割）*/
        #d + div{
            color:#FF0000;
        }
        /*普通兄弟选择器（以波浪号分割）*/
        #t ~ li{
            color: blue;
        }
        #div-1{
            color: blue;/*文本颜色*/
        }
        #div-2{
            /*对齐方式*/
            /*text-align: left;!*左对齐，默认*!
            text-align: center;!*居中对齐*!*/
            text-align: right;/*右对齐*/
        }
        #div-3{
            /*文本修饰*/
            text-decoration: overline;/*设置上划线*/
            text-decoration: underline;/*设置下划线*/
            text-decoration: line-through/*设置中划线*/
            text-decoration: overline underline line-through;/*同时设置上、中、下划线*/;
        }
        a{
            text-decoration: none;/*去除文本修饰*/
        }
        #p1{
            text-indent: 2em;/*设置首行缩进*/
        }

    </style>
    <!--引入外部的CSS文件-->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<!--
1.什么是CSS？
    CSS（英文全称：Cascading Style Sheets），层叠样式表
2.为什么学习CSS？
    1.虽然HTML的标签的某些属性可以设置样式效果，可是细节处理不够好。
    2.HTML实现样式效果会出现大量重复代码，维护成本高。
CSS最新版本是CSS3，能够做到网页和内容分离，对网页中的元素的位置排版等效果进行像素级的精准控制。
CSS用来美化网页，需要依赖HTML。

基础语法
    格式
        选择器名{
            属性：属性值；
            。。。。
        }
    注意
        1.CSS声明要以分号结尾，声明要用{}括起来
        2.建议一行写一个声明
        3.如果属性值由多个单词组成，要给值加上引号
注释
    /*注释内容*/

CSS的使用
    1.行内样式
        将样式定义在html标签上的style属性中；
        以行内样式写的CSS耦合度较高。
    2.内部样式
        定义在head标签中的style标签中
    3.外部样式
        通过link标签引入外部的css文件
        <link rel="stylesheet" type="text/css" href="../css/style.css">
            rel：当前文件与引入的文件之间的关系
            type：类型，css类型
            href：引入的资源的路径
    CSS的优先级：就近原则

基本选择器
    通用选择器
        选择所有元素
        *{
            属性名：属性值
        }
    元素选择器/标签选择器
        选择指定元素
        标签名{
            属性名：属性值
        }
    id选择器
        选择指定id属性的元素 #
        #id属性值{
            属性名：属性值
        }
        id值最好唯一
        id定义规则：以字母、数字、下划线、中划线组成，不要以数字开头
    class类选择器
        选择设置指定class属性值的元素
        .class属性值{
            属性名：属性值
        }
    分组选择器
        选择指定选择器选中的元素
        选择器1,选择器2,选择器3...{
            属性名：属性值
        }
    选择器优先级（权重值）
        id选择器   >   类选择器    >   元素选择器   >   通用选择器

        行内样式    style属性中    权重1000
组合选择器
    后代选择器（以空格分割）
        选择指定样元素的所有的后代元素
        指定元素 指定子代元素{
            属性名：属性值
            ...
        }
    子代选择器（以大于号分割）
        选择指定元素的第一代元素
    相邻兄弟选择器（以加号分割）
        选择指定元素相邻的下一个指定元素（只会向下找一个）
    普通兄弟选择器（以波浪号分割）
        选择指定元素后的指定同级元素（只会向下找）
背景
    通过元素选择器获取body元素
        background-color: antiquewhite;/*背景颜色*/
        background-image: url(/img/rain1.png);/*设置元素的背景图片，默认背景重复显示*/
        background-repeat: no-repeat;/*设置背景图片是否重复   no-repeat：表示不重复；    repeat-x：横向重复；  repeat-y：纵向重复；  repeat：横向纵向重复*/
        background-size: 100%;/*设置背景图片大小*/
文本
    color: blue;/*文本颜色*/
    /*对齐方式*/
        text-align: left;/*左对齐，默认*/
        text-align: center;/*居中对齐*/
        text-align: right;/*右对齐*/
    /*文本修饰*/
        text-decoration: overline;/*设置上划线*/
        text-decoration: underline;/*设置下划线*/
        text-decoration: line-through/*设置中划线*/
        text-decoration: overline underline line-through;/*同时设置上、中、下划线*/;
        text-decoration: none;/*去除文本修饰*/
    text-indent: 2em;/*设置首行缩进 em:一个文字高度*/
字体
-->
<body>
<p id="p1" >这是一段文本，我们需要首行缩进</p>
<div id="div-1">text1</div>
<div id="div-2">text2</div>
<div id="div-3">text3</div>
<a href="">超链接</a>
<br>
<div>
    普通兄弟选择器1
    <ul>
        <li>张三</li>
        <li id="t">开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
        <li>沈腾</li>
        <li>王宁</li>
    </ul>
</div>


<br>
<div id="d">
    相邻兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
    </ul>
</div>
<div>
    相邻兄弟选择器2
</div>
<div>
    相邻兄弟选择器3
</div>
<p>相邻兄弟选择器4</p>

<br>
<h1>food</h1>
<ul class="food">
    <li>fruit
        <ul>
            <li>banana</li>
            <li>apple</li>
            <li>pear</li>
        </ul>
    </li>
    <li>vegetable
        <ul>
            <li>cabbage</li>
            <li>rapeseed</li>
            <li>coleslaw</li>
        </ul>
    </li>
</ul>

<br>

    <div id="div1">div1</div>
    <div class="div2">div2</div>
    <div>div3</div>
<br>

    HELLO

    <p >这是一段文本</p>
    <p >这是一段文本</p>
</body>
</html>